
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-body">
            <div id="div_compare_chart" style="width: 600px;height:700px;float:left;"></div>
            <div id="main" style="width: 650px;height:450px;float: right;margin-top: 150px"></div>
        </div>

    </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use(['layer', 'form','jquery'], function(){
            var $ = layui.jquery;
            var layer = layui.layer
                ,form = layui.form ;
            // 初始化 费用比较
            var compareChart = echarts.init(document.getElementById('div_compare_chart'));
            // 费用比较---配置相关信息
            compareChart.setOption({
                title: {
                    text: '退款房间金额统计(单位/元)',
                    left: 'center'
                },
                tooltip: {
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [{
                    name: '支出统计',
                    type: 'pie',
                    itemStyle: {
                        // 阴影的大小
                        shadowBlur: 10,
                        // 阴影水平方向上的偏移
                        shadowOffsetX: 0,
                        // 阴影垂直方向上的偏移
                        shadowOffsetY: 0,
                        // 阴影颜色
                        shadowColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    // roseType: 'angle',//设置为南丁格尔图，即饼的半径不一致
                    radius: '50%',

                }]
            });
            // 动态加载的相关数据
            $.ajax({
                url: 'getDisByName',
                type: "post",
                async: true,//异步
                dataType: 'json',
                success: function (result) {

                    var str1=[];
                    if (result.code == 0) {
                        for (var i = 0; i < result.count.length; i++) {
                            str1.push({
                                name:result.count[i].typeName,
                                value:result.count[i].a
                            });
                        }
                        compareChart.setOption({
                            series: [{
                                data: str1
                            }]
                        });
                    } else
                    {
                        layer.msg("服务器提示:" + result.msg);
                    }
                },
                error: function () {
                    layer.alert("error");
                }
            });

            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title: {
                    text: '退款房间金额统计(单位/元)',
                    subtext: 'Y轴为退款金额,X轴为房间类型'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        // data: [120, 200, 150, 80, 70, 110, 130],
                        name:'销售数据/份',
                        type: 'bar'

                    }
                ]
            };


            loadDATA(option);



            function loadDATA(option){
                $.ajax({
                    type : "post",
                    async : false, //同步执行
                    url : "getColumn",
                    data : {},
                    dataType : "json", //返回数据形式为json
                    success : function(result) {

                        if (result) {
                            //初始化option.xAxis[0]中的data

                            option.xAxis.data=[];
                            for(var i=0;i<result.column.length;i++){
                                option.xAxis.data.push(result.column[i].typeName);

                            }
                            //初始化option.series[0]中的data
                            option.series[0].data=[];
                            for(var i=0;i<result.column.length;i++){

                                option.series[0].data.push(result.column[i].a);
                            }
                            myChart.setOption(option);
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>
